<template>
  <div class="student-list">
    <!-- 标题 -->
    <div class="page-header">
      <h1 class="page-title">{{ $t('assets.studentList.studentProfile') }}</h1>
    </div>

    <!-- 学生档案功能复合区 -->
    <div class="function-area">
      <!-- 左侧分类导航 -->
      <div class="category-section">
        <div class="nav-tabs">
          <div
            class="nav-tab"
            :class="{ active: selectedCategory === 'student' }"
            @click="handleCategoryChange('student')"
          >
            {{ $t('assets.studentList.student') }}
          </div>
          <div
            class="nav-tab"
            :class="{ active: selectedCategory === 'group' }"
            @click="handleCategoryChange('group')"
          >
            {{ $t('assets.studentList.group') }}
          </div>
        </div>
      </div>

      <!-- 右侧搜索框+新建按钮 -->
      <div class="action-section">
        <el-input
          v-model="searchKeyword"
          :placeholder="$t('assets.studentList.searchPlaceholder')"
          :suffix-icon="Search"
          class="search-input"
          @input="handleSearch"
        />
        <el-button type="primary" :icon="Plus" @click="handleAdd">
          {{ selectedCategory === 'student' ? $t('assets.studentList.newStudent') : $t('assets.studentList.newGroup') }}
        </el-button>
      </div>
    </div>

    <!-- 学生列表 -->
    <div v-if="selectedCategory === 'student'" class="student-table-container">
      <!-- 有数据时显示表格 -->
      <el-table
        v-if="filteredStudents.length > 0"
        :data="paginatedStudents"
        class="student-table"
        v-loading="loading"
      >
        <!-- 学生名称/登录名 -->
        <el-table-column :label="$t('assets.studentList.studentNameLogin')" width="180">
          <template #default="scope">
            <div class="student-name-cell">
              <div class="student-name">{{ getStudentName(scope.row) }}</div>
              <div class="student-login">{{ getStudentLogin(scope.row) }}</div>
            </div>
          </template>
        </el-table-column>

        <!-- 关联课程 -->
        <el-table-column :label="$t('assets.studentList.relatedCourses')" width="150">
          <template #default="scope">
            <el-button
              type="text"
              class="course-link"
              @click="showCourseDialog(scope.row.courses)"
            >
              {{ scope.row.courses.length }}
            </el-button>
          </template>
        </el-table-column>

        <!-- 未完成教学任务 -->
        <el-table-column :label="$t('assets.studentList.incompleteTasks')" width="140">
          <template #default="scope">
            <el-button type="text" class="task-link">
              {{ scope.row.incompleteTasks }}
            </el-button>
          </template>
        </el-table-column>

        <!-- 已完成教学任务 -->
        <el-table-column :label="$t('assets.studentList.completedTasks')" width="140">
          <template #default="scope">
            <el-button type="text" class="task-link">
              {{ scope.row.completedTasks }}
            </el-button>
          </template>
        </el-table-column>

        <!-- 手机号 -->
        <el-table-column prop="phone" :label="$t('assets.studentList.phone')" width="130" />

        <!-- 邮箱 -->
        <el-table-column prop="email" :label="$t('assets.studentList.email')" width="180" />

        <!-- 状态 -->
        <el-table-column :label="$t('assets.studentList.status')" width="100">
          <template #default="scope">
            <div class="status-cell">
              <div
                class="status-dot"
                :class="{
                  'status-normal': scope.row.status === 'normal',
                  'status-frozen': scope.row.status === 'frozen'
                }"
              ></div>
              <span
                class="status-text"
                :class="{
                  'text-normal': scope.row.status === 'normal',
                  'text-frozen': scope.row.status === 'frozen'
                }"
              >
                {{ scope.row.status === 'normal' ? $t('assets.studentList.normal') : $t('assets.studentList.frozen') }}
              </span>
            </div>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column :label="$t('assets.studentList.operation')" width="100">
          <template #default="scope">
            <el-button
              type="text"
              :class="scope.row.status === 'normal' ? 'freeze-btn' : 'unfreeze-btn'"
              @click="handleStatusChange(scope.row)"
            >
              {{ scope.row.status === 'normal' ? $t('assets.studentList.freeze') : $t('assets.studentList.unfreeze') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 学生列表分页 -->
      <div v-if="filteredStudents.length > 0" class="pagination-container">
        <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:current-page="currentPageStudents"
            v-model:page-size="pageSizeStudents"
            :page-sizes="[10, 20, 50, 100]"
            :total="filteredStudents.length"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleStudentSizeChange"
            @current-change="handleStudentCurrentChange"
          />
        </el-config-provider>
      </div>

      <!-- 无数据时显示空状态 -->
      <div v-else class="empty-state">
        <div class="empty-icon">
          <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="20" y="30" width="80" height="60" rx="8" fill="#E5E7EB"/>
            <rect x="20" y="30" width="80" height="15" rx="8" fill="#D1D5DB"/>
            <rect x="45" y="30" width="30" height="8" rx="4" fill="#F3F4F6"/>
          </svg>
        </div>
        <div class="empty-text">{{ $t('assets.studentList.noStudents') }}</div>
      </div>
    </div>

    <!-- 分组网格布局 -->
    <div v-if="selectedCategory === 'group'" class="groups-container">
      <div class="groups-grid">
        <div v-for="group in groups" :key="group.id" class="group-card">
          <!-- 分组名称 -->
          <div class="group-name">{{ group.name }}</div>

          <!-- 学生数标签 -->
          <div class="student-count-label">{{ $t('assets.studentList.studentCount') }}</div>

          <!-- 人数（大写黑体） -->
          <div class="student-count">{{ group.studentCount.toLocaleString() }}</div>

          <!-- 操作按钮 -->
          <div class="group-actions">
            <el-button
              type="text"
              class="edit-btn"
              @click="handleEditGroup(group)"
            >
              {{ $t('assets.studentList.edit') }}
            </el-button>
            <el-button
              type="text"
              class="delete-btn"
              @click="handleDeleteGroup(group)"
            >
              {{ $t('common.delete') }}
            </el-button>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            :total="groups.length"
            layout="prev, pager, next, sizes, jumper"
            :page-sizes="[10, 20, 50, 100]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
      </div>

    </div>


    <!-- 关联课程弹窗 -->
    <el-dialog
      v-model="courseDialogVisible"
      :title="$t('assets.studentList.relatedCoursesTitle')"
      width="500px"
    >
      <div class="course-list">
        <div v-for="course in selectedCourses" :key="course.id" class="course-item">
          <span class="course-name">{{ course.name }}</span>
          <span class="course-code">{{ course.code }}</span>
        </div>
      </div>
    </el-dialog>

    <!-- 创建分组弹窗 -->
    <el-dialog
      v-model="createGroupDialogVisible"
      title=""
      width="500px"
      :show-close="false"
      class="create-group-dialog"
    >
      <!-- 自定义头部 -->
      <template #header>
        <div class="dialog-header">
          <h3 class="dialog-title">{{ $t('assets.studentList.createGroup') }}</h3>
          <el-button
            :icon="Close"
            text
            class="close-btn"
            @click="closeCreateGroupDialog"
          />
        </div>
      </template>

      <!-- 分组表单 -->
      <el-form
        ref="groupFormRef"
        :model="groupForm"
        :rules="groupFormRules"
        label-position="top"
        class="group-form"
      >
        <!-- 分组名称 -->
        <el-form-item prop="name" class="form-item">
          <template #label>
            <span class="required-label">
              {{ $t('assets.studentList.groupName') }}
            </span>
          </template>
          <el-input
            v-model="groupForm.name"
            :placeholder="$t('assets.studentList.groupNamePlaceholder')"
            maxlength="50"
            show-word-limit
            class="form-input"
          />
        </el-form-item>

        <!-- 关联学生 -->
        <el-form-item prop="students" class="form-item">
          <template #label>
            <span class="required-label">
              {{ $t('assets.studentList.associatedStudents') }}
            </span>
          </template>

          <!-- 已选学生标签显示区 -->
          <div class="selected-students-container">
            <div class="selected-students-input" @click="toggleStudentDropdown">
              <div class="selected-students-tags">
                <el-tag
                  v-for="student in selectedStudentsForGroup"
                  :key="student.id"
                  closable
                  @close="removeStudentFromGroup(student.id)"
                  class="student-tag"
                  type="info"
                >
                  {{ student.name }}
                </el-tag>
                <span v-if="selectedStudentsForGroup.length === 0" class="placeholder-text">
                  请选择学生
                </span>
              </div>
              <el-icon class="dropdown-icon" :class="{ 'is-reverse': showStudentDropdown }">
                <ArrowDown />
              </el-icon>
            </div>

            <!-- 学生选择下拉列表 -->
            <div v-show="showStudentDropdown" class="student-dropdown">
              <div class="student-dropdown-header">
                <span class="dropdown-title">选择学生</span>
              </div>
              <div class="student-list">
                <div
                  v-for="student in availableStudents"
                  :key="student.id"
                  class="student-option"
                  @click="toggleStudentSelection(student)"
                >
                  <el-checkbox
                    :model-value="isStudentSelected(student.id)"
                    class="student-checkbox"
                    @click.stop
                  />
                  <span class="student-name">{{ student.name }}</span>
                </div>
                <div v-if="availableStudents.length === 0" class="no-students">
                  暂无可选学生
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <!-- 底部按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeCreateGroupDialog" class="cancel-btn">
            {{ $t('common.cancel') }}
          </el-button>
          <el-button type="primary" @click="confirmCreateGroup" class="confirm-btn">
            {{ $t('common.confirm') }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 确认对话框 -->
    <ConfirmationDialog
      v-model:visible="confirmDialogVisible"
      :action="confirmAction"
      :student-name="selectedStudent?.name || ''"
      @confirm="handleConfirmAction"
      @cancel="handleCancelAction"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElForm } from 'element-plus'
import { Plus, Search, Close, ArrowDown } from '@element-plus/icons-vue'
import ConfirmationDialog from '@/components/shared/Common/ConfirmationDialog.vue'
import { t as $t } from '@/plugins/simpleI18n'
import { useStore } from '@/stores'
import { useLocaleStore } from '@/stores/localeStore'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 接口定义
interface Course {
  id: string
  name: string
  code: string
}

interface Student {
  id: string
  name: string
  loginName: string
  courses: Course[]
  incompleteTasks: number
  completedTasks: number
  phone: string
  email: string
  status: 'normal' | 'frozen'
}

interface Group {
  id: string
  name: string
  studentCount: number
}

interface GroupForm {
  name: string
  students: string[]
}

const store = useStore()

// 响应式数据
const loading = ref(false)
const selectedCategory = ref<'student' | 'group'>('student') // 默认选择学生分类
const searchKeyword = ref('')
const courseDialogVisible = ref(false)
const selectedCourses = ref<Course[]>([])
const confirmDialogVisible = ref(false)
const confirmAction = ref<'freeze' | 'unfreeze'>('freeze')
const selectedStudent = ref<Student | null>(null)

// 创建分组相关数据
const createGroupDialogVisible = ref(false)
const groupFormRef = ref<InstanceType<typeof ElForm>>()
const showStudentDropdown = ref(false)
const selectedStudentsForGroup = ref<Student[]>([])

// 分组表单数据
const groupForm = ref<GroupForm>({
  name: '',
  students: []
})

// 分组表单验证规则
const groupFormRules = {
  name: [
    { required: true, message: $t('assets.studentList.groupNameRequired'), trigger: 'blur' },
    { min: 1, max: 50, message: $t('assets.studentList.groupNameLength'), trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9\u4e00-\u9fa5_]+$/, message: $t('assets.studentList.groupNamePattern'), trigger: 'blur' }
  ],
  students: [
    { required: true, message: $t('assets.studentList.studentsRequired'), trigger: 'change' },
    { type: 'array' as const, min: 1, message: $t('assets.studentList.studentsMinCount'), trigger: 'change' }
  ]
}

// 分组数据
const groups = ref<Group[]>([
  { id: '1', name: $t('assets.studentList.groupName'), studentCount: 6231 },
  { id: '2', name: $t('assets.studentList.groupName'), studentCount: 6231 },
  { id: '3', name: $t('assets.studentList.groupName'), studentCount: 6231 },
  { id: '4', name: $t('assets.studentList.groupName'), studentCount: 6231 },
  { id: '5', name: $t('assets.studentList.groupName'), studentCount: 6231 },
  { id: '6', name: $t('assets.studentList.groupName'), studentCount: 6231 },
  { id: '7', name: $t('assets.studentList.groupName'), studentCount: 6231 },
  { id: '8', name: $t('assets.studentList.groupName'), studentCount: 6231 },
  { id: '9', name: $t('assets.studentList.groupName'), studentCount: 6231 },
  { id: '10', name: $t('assets.studentList.groupName'), studentCount: 6231 },
  { id: '11', name: $t('assets.studentList.groupName'), studentCount: 6231 },
  { id: '12', name: $t('assets.studentList.groupName'), studentCount: 6231 }
])

// 分页相关数据
const currentPage = ref(1)
const pageSize = computed(() => store.pageSize)

// 学生列表分页数据
const currentPageStudents = ref(1)
const pageSizeStudents = computed(() => store.pageSize)

// 学生数据
const students = ref<Student[]>([
  {
    id: '1',
    name: $t('assets.sampleData.studentName1'),
    loginName: 'zhangsan',
    courses: [
      { id: '1', name: $t('assets.sampleData.courseMath'), code: 'MATH001' },
      { id: '2', name: $t('assets.sampleData.courseAlgebra'), code: 'MATH002' }
    ],
    incompleteTasks: 3,
    completedTasks: 7,
    phone: '13800138001',
    email: 'zhangsan@example.com',
    status: 'normal'
  },
  {
    id: '2',
    name: $t('assets.sampleData.studentName2'),
    loginName: 'li@si', // 包含特殊字符，不符合规范
    courses: [
      { id: '1', name: $t('assets.sampleData.courseMath'), code: 'MATH001' },
      { id: '3', name: $t('assets.sampleData.courseProbability'), code: 'MATH003' }
    ],
    incompleteTasks: 1,
    completedTasks: 9,
    phone: '13800138002',
    email: 'lisi@example.com',
    status: 'frozen'
  },
  {
    id: '3',
    name: $t('assets.sampleData.studentName3'),
    loginName: '', // 空登录名
    courses: [
      { id: '2', name: $t('assets.sampleData.courseAlgebra'), code: 'MATH002' }
    ],
    incompleteTasks: 5,
    completedTasks: 5,
    phone: '13800138003',
    email: 'wangwu@example.com',
    status: 'normal'
  },
  {
    id: '4',
    name: '', // 空学生名称
    loginName: 'student_test',
    courses: [
      { id: '1', name: $t('assets.sampleData.courseMath'), code: 'MATH001' }
    ],
    incompleteTasks: 2,
    completedTasks: 8,
    phone: '13800138004',
    email: 'test@example.com',
    status: 'normal'
  },
  {
    id: '5',
    name: $t('assets.sampleData.studentName1') + '5',
    loginName: 'ab', // 长度不足，不符合规范
    courses: [
      { id: '2', name: $t('assets.sampleData.courseAlgebra'), code: 'MATH002' }
    ],
    incompleteTasks: 1,
    completedTasks: 4,
    phone: '13800138005',
    email: 'student5@example.com',
    status: 'normal'
  }
])

// 计算属性
const filteredStudents = computed(() => {
  // 如果选择的是分组，返回空数组（分组功能待开发）
  if (selectedCategory.value === 'group') {
    return []
  }

  let result = students.value

  // 按搜索关键词筛选
  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.trim().toLowerCase()
    result = result.filter(student =>
      student.name.toLowerCase().includes(keyword) ||
      student.loginName.toLowerCase().includes(keyword)
    )
  }

  return result
})

// 分页后的学生列表
const paginatedStudents = computed(() => {
  const start = (currentPageStudents.value - 1) * pageSizeStudents.value
  const end = start + pageSizeStudents.value
  return filteredStudents.value.slice(start, end)
})

// 可选择的学生列表（排除已选择的）
const availableStudents = computed(() => {
  return students.value.filter(student =>
    !selectedStudentsForGroup.value.some(selected => selected.id === student.id)
  )
})
// 方法 用“学生”/“分组”联合类型
const handleCategoryChange = (category: 'student' | 'group') => {
  selectedCategory.value = category
  console.log('分类切换:', category)
}

const handleSearch = () => {
  console.log('搜索:', searchKeyword.value)
}

const handleAdd = () => {
  console.log('点击新建按钮，当前分类:', selectedCategory.value)
  if (selectedCategory.value === 'student') {
    ElMessage.info('添加学生功能开发中...')
  } else {
    console.log('打开创建分组弹窗')
    // 打开创建分组弹窗
    openCreateGroupDialog()
  }
}

const showCourseDialog = (courses: Course[]) => {
  selectedCourses.value = courses
  courseDialogVisible.value = true
}

const handleStatusChange = (student: Student) => {
  selectedStudent.value = student
  confirmAction.value = student.status === 'normal' ? 'freeze' : 'unfreeze'
  confirmDialogVisible.value = true
}

const handleConfirmAction = () => {
  if (selectedStudent.value) {
    const action = selectedStudent.value.status === 'normal' ? '冻结' : '解冻'
    // 切换状态
    selectedStudent.value.status = selectedStudent.value.status === 'normal' ? 'frozen' : 'normal'
    ElMessage.success(`${action}成功`)
  }
  confirmDialogVisible.value = false
  selectedStudent.value = null
}

const handleCancelAction = () => {
  confirmDialogVisible.value = false
  selectedStudent.value = null
}

// 分组相关方法
const handleEditGroup = (group: Group) => {
  ElMessage.info(`编辑分组: ${group.name}`)
}

const handleDeleteGroup = (group: Group) => {
  ElMessage.info(`删除分组: ${group.name}`)
}

// 创建分组相关方法
const openCreateGroupDialog = () => {
  console.log('openCreateGroupDialog 被调用')
  createGroupDialogVisible.value = true
  console.log('createGroupDialogVisible 设置为:', createGroupDialogVisible.value)
  resetGroupForm()
}

const closeCreateGroupDialog = () => {
  createGroupDialogVisible.value = false
  showStudentDropdown.value = false
  resetGroupForm()
}

const resetGroupForm = () => {
  groupForm.value = {
    name: '',
    students: []
  }
  selectedStudentsForGroup.value = []
  groupFormRef.value?.clearValidate()
}

const toggleStudentDropdown = () => {
  showStudentDropdown.value = !showStudentDropdown.value
}

const isStudentSelected = (studentId: string) => {
  return selectedStudentsForGroup.value.some(student => student.id === studentId)
}

const toggleStudentSelection = (student: Student) => {
  const index = selectedStudentsForGroup.value.findIndex(s => s.id === student.id)
  if (index > -1) {
    selectedStudentsForGroup.value.splice(index, 1)
  } else {
    selectedStudentsForGroup.value.push(student)
  }
  // 更新表单数据
  groupForm.value.students = selectedStudentsForGroup.value.map(s => s.id)
}

const removeStudentFromGroup = (studentId: string) => {
  selectedStudentsForGroup.value = selectedStudentsForGroup.value.filter(s => s.id !== studentId)
  groupForm.value.students = selectedStudentsForGroup.value.map(s => s.id)
}

const confirmCreateGroup = async () => {
  if (!groupFormRef.value) return

  try {
    await groupFormRef.value.validate()

    // 创建新分组
    const newGroup: Group = {
      id: Date.now().toString(),
      name: groupForm.value.name,
      studentCount: selectedStudentsForGroup.value.length
    }

    groups.value.unshift(newGroup)

    ElMessage.success($t('assets.studentList.groupCreatedSuccess'))
    closeCreateGroupDialog()
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 分页方法
const handleSizeChange = (size: number) => {
  store.setPageSize(size)
  currentPage.value = 1
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
}

// 学生列表分页处理函数
const handleStudentSizeChange = (size: number) => {
  store.setPageSize(size)
  currentPageStudents.value = 1
}

const handleStudentCurrentChange = (page: number) => {
  currentPageStudents.value = page
}

// 获取学生名称（带验证）
const getStudentName = (student: Student): string => {
  if (!student.name || student.name.trim() === '') {
    return '没有学生名称数据'
  }
  return student.name
}

// 获取学生登录名（带正则验证）
const getStudentLogin = (student: Student): string => {
  if (!student.loginName || student.loginName.trim() === '') {
    return '没有登录名数据'
  }

  // 登录名正则规范：只允许字母、数字、下划线，长度3-20位
  const loginNameRegex = /^[a-zA-Z0-9_]{3,20}$/

  if (!loginNameRegex.test(student.loginName)) {
    return '没有登录名规范数据'
  }

  return '登录名：' + student.loginName
}

// 点击外部关闭下拉框
const handleClickOutside = (event: Event) => {
  const target = event.target as HTMLElement
  const container = document.querySelector('.selected-students-container')
  if (container && !container.contains(target)) {
    showStudentDropdown.value = false
  }
}

// 生命周期
onMounted(() => {
  console.log('学生档案页面加载完成')
  // 添加点击外部关闭下拉框的事件监听
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  // 移除事件监听
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.student-list {
  padding: 20px;
  background: white;
  color: var(--text-color-primary);
  min-height: calc(100vh - 64px);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 标题区域 */
.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

/* 功能复合区 */
.function-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  border-radius: 8px;
}

.category-section {
  flex-shrink: 0;
}

/* 导航标签样式 */
.nav-tabs {
  display: flex;
  gap: 0;
}

.nav-tab {
  padding: 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #909399;
  cursor: pointer;
  position: relative;
  margin-right: 32px;
  transition: color 0.3s ease;
}

.nav-tab:hover {
  color: #303133;
}

.nav-tab.active {
  color: #303133;
  font-weight: 600;
}

.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #303133;
  border-radius: 2px;
}

.action-section {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-input {
  width: 280px;
}

/* 学生表格容器 */
.student-table-container {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: auto;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  background: #fafafa;
}

.empty-icon {
  margin-bottom: 20px;
  opacity: 0.6;
}

.empty-text {
  font-size: 16px;
  color: #909399;
  font-weight: 500;
}

/* 分组容器样式 */
.groups-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 分组网格布局 */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

/* 分组卡片样式 */
.group-card {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.group-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #c0c4cc;
}

/* 分组名称 */
.group-name {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  line-height: 1.4;
}

/* 学生数标签 */
.student-count-label {
  font-size: 12px;
  color: #909399;
  line-height: 1.2;
}

/* 人数（大写黑体） */
.student-count {
  font-size: 24px;
  color: #303133;
  font-weight: 700;
  line-height: 1.2;
  margin: 4px 0;
}

/* 操作按钮容器 */
.group-actions {
  display: flex;
  gap: 0;
  margin-top: auto;
}

.group-actions .el-button {
  flex: 1;
  margin: 0;
  border-radius: 0;
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  font-size: 14px;
}

.group-actions .el-button:first-child {
  border-radius: 4px 0 0 4px;
  border-right: none;
}

.group-actions .el-button:last-child {
  border-radius: 0 4px 4px 0;
}

/* 编辑按钮 */
.edit-btn {
  color: #409EFF !important;
  background: #fff;
}

.edit-btn:hover {
  background: #ecf5ff !important;
  border-color: #409EFF !important;
}

/* 删除按钮 */
.delete-btn {
  color: #409EFF !important;
  background: #fff;
}

.delete-btn:hover {
  background: #ecf5ff !important;
  border-color: #409EFF !important;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .groups-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .groups-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .groups-grid {
    grid-template-columns: 1fr;
  }

  .group-card {
    padding: 16px;
  }
}

/* 学生名称单元格 */
.student-name-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.student-name {
  font-size: 12px;
  font-weight: 600;
  color: #303133;
  line-height: 1.2;
}

.student-login {
  font-size: 10px;
  color: #909399;
  line-height: 1.2;
}

/* 课程链接 */
.course-link {
  color: #409EFF !important;
  font-size: 14px;
  padding: 0;
}

.course-link:hover {
  color: #66b1ff !important;
}

/* 任务链接 */
.task-link {
  color: #409EFF !important;
  font-size: 14px;
  padding: 0;
}

.task-link:hover {
  color: #66b1ff !important;
}

/* 状态单元格 */
.status-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.status-normal {
  background-color: #67c23a;
}

.status-dot.status-frozen {
  background-color: #909399;
}

.status-text {
  font-size: 14px;
  line-height: 1;
}

.text-normal {
  color: #303133;
}

.text-frozen {
  color: #909399;
}

/* 操作按钮 */
.freeze-btn {
  color: #f56c6c !important;
  font-size: 14px;
  padding: 0;
}

.freeze-btn:hover {
  color: #f78989 !important;
}

.unfreeze-btn {
  color: #409EFF !important;
  font-size: 14px;
  padding: 0;
}

.unfreeze-btn:hover {
  color: #66b1ff !important;
}

/* 课程弹窗 */
.course-list {
  max-height: 300px;
  overflow-y: auto;
}

.course-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.course-item:last-child {
  border-bottom: none;
}

.course-name {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.course-code {
  font-size: 12px;
  color: #909399;
}

/* 表格样式调整 - 使用更强的选择器优先级 */
.student-table {
  width: 100% !important;
  border: none !important;
}

.student-table :deep(.el-table__inner-wrapper) {
  width: 100% !important;
}

.student-table :deep(.el-table__header) {
  width: 100% !important;
  table-layout: fixed !important;
}

.student-table :deep(.el-table__header-wrapper) {
  width: 100% !important;
  overflow: visible !important;
}

.student-table :deep(.el-table__body-wrapper) {
  width: 100% !important;
  overflow-x: auto !important;
}

.student-table :deep(.el-table__body) {
  width: 100% !important;
  table-layout: fixed !important;
}

.student-table :deep(.el-table th) {
  background-color: var(--table-header-bg-color) !important;
  color: var(--text-color-secondary) !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--border-color-secondary) !important;
  padding: 12px 0 !important;
  text-align: left !important;
}

.student-table :deep(.el-table td) {
  background-color: var(--card-bg-color) !important;
  color: var(--text-color-primary) !important;
  border-bottom: 1px solid var(--table-border-color) !important;
  padding: 12px 0 !important;
}

.student-table :deep(.el-table tr:hover > td) {
  background-color: var(--table-row-hover-bg-color) !important;
}

/* 确保每列宽度一一对应 */
.student-table :deep(colgroup) {
  width: 100% !important;
}

.student-table :deep(colgroup col) {
  width: auto !important;
}

/* 表格容器强制宽度 */
.student-table-container {
  width: 100% !important;
  overflow-x: auto;
}

.student-table-container .el-table {
  width: 100% !important;
  min-width: 100% !important;
}

/* 额外的强制样式覆盖 */
.student-list :deep(.el-table) {
  width: 100% !important;
}

.student-list :deep(.el-table .el-table__header-wrapper),
.student-list :deep(.el-table .el-table__body-wrapper),
.student-list :deep(.el-table .el-table__footer-wrapper) {
  width: 100% !important;
}

.student-list :deep(.el-table table) {
  width: 100% !important;
  table-layout: fixed !important;
}

/* 针对特定的Element Plus版本的样式覆盖 */
.student-list .el-table__inner-wrapper {
  width: 100% !important;
}

.student-list .el-table {
  width: 100% !important;
}

/* 创建分组弹窗样式 */
.create-group-dialog {
  border-radius: 8px;
}

.create-group-dialog :deep(.el-dialog__body) {
  padding: 24px;
}

.create-group-dialog :deep(.el-dialog__footer) {
  padding: 16px 24px 24px;
  border-top: 1px solid #f0f0f0;
}

.create-group-dialog :deep(.el-dialog__header) {
  padding: 0;
  border-bottom: 1px solid #ebeef5;
}

.create-group-dialog :deep(.el-dialog__body) {
  padding: 24px;
}

.create-group-dialog :deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #ebeef5;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 24px;
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  flex: 1;
}

.close-btn {
  color: #909399;
  font-size: 16px;
  padding: 4px;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  margin-left: 16px;
}

.close-btn:hover {
  color: #606266;
  background: #f5f7fa;
}

.group-form {
  margin-top: 8px;
}

.form-item {
  margin-bottom: 24px;
}

.required-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.required-star {
  color: #f56c6c;
  margin-right: 4px;
}

.form-input {
  margin-top: 8px;
}

.selected-students-container {
  position: relative;
  margin-top: 8px;
}

.selected-students-input {
  min-height: 40px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s;
}

.selected-students-input:hover {
  border-color: #c0c4cc;
}

.selected-students-input:focus-within {
  border-color: #409eff;
}

.selected-students-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.student-tag {
  background: #f4f4f5;
  border: none;
  color: #606266;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
}

.student-tag :deep(.el-tag__close) {
  color: #909399;
  font-size: 12px;
}

.student-tag :deep(.el-tag__close):hover {
  color: #606266;
  background: rgba(0, 0, 0, 0.1);
}

.placeholder-text {
  color: #c0c4cc;
  font-size: 14px;
}

.dropdown-icon {
  color: #c0c4cc;
  font-size: 14px;
  transition: transform 0.3s;
  margin-left: 8px;
}

.dropdown-icon.is-reverse {
  transform: rotate(180deg);
}

.student-dropdown {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 240px;
  overflow: hidden;
}

.student-dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.dropdown-title {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.student-list {
  max-height: 180px;
  overflow-y: auto;
}

.student-option {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.student-option:hover {
  background: #f5f7fa;
}

.student-checkbox {
  margin-right: 12px;
}

.student-name {
  font-size: 14px;
  color: #303133;
}

.no-students {
  padding: 20px 16px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0;
}

.cancel-btn {
  color: #606266;
  border-color: #dcdfe6;
  background: #fff;
  padding: 10px 20px;
  border-radius: 4px;
}

.cancel-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background: #ecf5ff;
}

.confirm-btn {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
}

.confirm-btn:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

.confirm-btn:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}


</style>